<template>
  <view class="user-order">
    <u-sticky>
      <view class="tab">
        <u-tabs :list="tabList" @click="tabClick" lineColor="#75CECC" itemStyle="width:33%;height:45px;padding:0" :activeStyle="{color:'#75CECC'}"></u-tabs>
      </view>
    </u-sticky>
    <view class="order-wrap">
      <view class="order-list">
        <view v-if="orderList.length > 0">
          <view class="order-item" v-for="item in orderList" :key="item.id">
            <view class="item-title">
              <view class="title-left">{{ $t("index.dingdanBh") }}：{{item.txnNo}}</view>
              <view class="title-right">
                <div>
                  <p v-if="item.txnStatus === 0">{{ $t("order.daiZhiF") }}</p>
                  <p v-else-if="item.txnStatus === 2">{{ $t("order.yiZhiF") }}</p>
                  <p v-else-if="item.txnStatus === 99">{{ $t("order.yiShiX") }}</p>
                </div>
              </view>
            </view>
            <view class="item-content">
              <view class="item-img">
                <u-image :src="item.url" height="50px" width="50px" />
              </view>
              <view class="item-text">
                <view class="name">{{item.vipName}}</view>
                <view class="plan-price">{{ $t("order.huiYuanSl") }}: {{item.count}}</view>
                <view class="price" v-if="txnStatus === '0'">{{ $t("order.huiYuanJe") }}: <text class="color">¥ {{item.amountPrice}}</text></view>
              </view>
              <view class="price" v-if="txnStatus !== '0'">{{ $t("order.huiYuanJe") }}: <text class="color">¥ {{item.amountPrice}}</text></view>
            </view>
            <view class="item-bottom">
              <view class="pay-now" v-if="txnStatus === '0'"><text @click="pay(item)">{{ $t("order.liJiZf") }}</text></view>
              <view class="bottom-left bottom-right-border" v-if="txnStatus !== '0'">
                <view v-if="txnStatus === '2'">{{ $t("index.zhiFuSj") }}</view>
                <view v-if="txnStatus === '99'">{{ $t("order.xiaDanSj") }}</view>
                <view v-if="txnStatus === '2'">{{ item.payTime }}</view>
                <view v-if="txnStatus === '99'">{{ item.createTime }}</view>
              </view>
              <view class="bottom-left" v-if="txnStatus === '2'">
                <view>{{ $t("order.daoQiSj") }}</view>
                <view>{{ item.effectiveTime  }}</view>
              </view>
              <view class="bottom-left" v-if="txnStatus === '99'">
                <view>{{ $t("order.guoQiSj") }} </view>
                <view>{{ item.expirationTime  }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="no-data" v-else>
          <u-empty mode="data" :icon="`${imgPath}/images/index/no_order.png`" width="100px" height="100px" :text="$t('index.zanWuSj')" textColo="#75CECC" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    imgPath() {
      return this.$config.baseURL + "/static/front";
    },
  },
  data() {
    return {
      txnStatus: "0",
      tabList: [
        {
          name: this.$t("order.daiZhiF"),
          value: "0",
        },
        {
          name: this.$t("order.yiZhiF"),
          value: "2",
        },
        {
          name: this.$t("order.yiShiX"),
          value: "99",
        },
      ],
      orderList: [],
      pageNum: 1,
      pageSize: 5,
      totalCount: 0,
    };
  },
  onLoad() {
    this.getMyOrderList();
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: this.$t("mine.woDeDd"),
    });
  },
  onReachBottom() {
    //上拉到底时触发，onReachBottom函数跟生命周期同级
    if (this.orderList.length < this.totalCount) {
      this.pageNum++; //当前条数小于总条数 则增加请求页数
      this.getMyOrderList(); //调用加载数据方法
    } else {
      uni.$u.toast(this.$t("index.yiJiaZaiQb"));
    }
  },
  methods: {
    tabClick(item) {
      this.orderList = [];
      this.pageNum = 1;
      this.txnStatus = item.value;
      this.getMyOrderList();
    },
    /**
     * 用户订单
     */
    async getMyOrderList() {
      const res = await this.$api.getOrderList({
        txnStatus: this.txnStatus,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
      if (res.code === 0 && res.data) {
        this.orderList = [...this.orderList, ...res.data.list];
        this.totalCount = res.data.totalCount;
      } else {
        this.orderList = [];
      }
    },
    async pay(item) {
      const payRes = await this.$api.prePay({ orderNumber: item.txnNo });
      if (payRes.code === 0) {
        const that = this;
        const data = JSON.parse(payRes.data.pay_info);
        uni.requestPayment({
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: data.signType,
          paySign: data.paySign,
          success: function (resSuccess) {
            if (resSuccess.errMsg == "requestPayment:ok") {
              uni.$u.toast(that.$t("member.gouMaiCg"));
              that.pageNum = 1;
              that.pageSize = 5;
              that.orderList = [];
              that.getMyOrderList();
            }
          },
          fail: function (err) {
            console.log(err);
            if (err.errMsg == "requestPayment:fail cancel") {
              uni.$u.toast(that.$t("pay.zhiFuQx"));
            } else {
              uni.$u.toast(err.errMsg);
            }
          },
        });
      }
    },
  },
};
</script>
<style>
page {
  background-color: #f6f6f6;
}
</style>

<style lang="scss" scoped>
.user-order {
  // overflow: hidden;  设置后吸顶效果失效
  width: 100%;
  .tab {
    height: 50px;
    background-color: #fff;
  }
  .order-wrap {
    padding: 0 0 20px;
    overflow: hidden;
    .order-list {
      overflow: hidden;
      padding: 0 15px;
      .order-item {
        overflow: hidden;
        background-color: #fff;
        border-radius: 8px;
        margin-top: 20px;
        padding: 0 15px;
        height: 190px;
        .item-title {
          display: flex;
          height: 50px;
          overflow: hidden;
          align-items: center;
          justify-content: space-between;
          .title-left {
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .title-right {
            color: #75cecc;
          }
        }
        .item-content {
          overflow: hidden;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ddd;
          padding: 10px 0 10px;
          font-size: 14px;
          .item-img {
            width: 50px;
            overflow: hidden;
          }
          .item-text {
            flex: 1;
            padding: 0 10px;
            .name {
              font-weight: bold;
              line-height: 24px;
            }
            .plan-price {
              color: #333;
              line-height: 24px;
            }
          }
          .color {
            color: #ff6153;
          }
        }
        .item-bottom {
          font-size: 14px;
          color: #999;
          // height: 40px;
          display: flex;
          align-items: center;
          .pay-now {
            text-align: right;
            width: 100%;
            padding-top: 16px;
            text {
              color: #75cecc;
              border: 1px solid #75cecc;
              padding: 3px 10px;
              border-radius: 5px;
              font-size: 14px;
            }
          }
          .bottom-left {
            text-align: center;
            height: 45px;
            margin-top: 13px;
            width: 50%;
            line-height: 24px;
            color: #999;
          }
          .bottom-right-border {
            border-right: 1px solid #ddd;
          }
        }
      }
      .no-data {
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
        height: 160px;
        margin-top: 20px;
      }
    }
  }
}
</style>
